<template>
    <Modal
        :open="open"
        class="modal"
        :style="{width: 'min-content', height: 'min-content'}"
        :footer="null"
        @cancel="handleCancel"
        title="企业微信登录"
        destroyOnClose
    >
        <div class="wrapper">
            <div class="title">企业微信扫码登录</div>
            <div class="desc mt16">如果二维码失效过期，请点击重试按钮</div>
            <div class="qcode">
                <a-qrcode
                    :value="data?.qrUrl"
                    color="#fff"
                    bordered
                    :status="loading ? 'loading' : status"
                    @refresh="handleRefresh"
                />
            </div>
        </div>
    </Modal>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {Modal} from "ant-design-vue";
import {useRequest} from "alova/client";
import {weChatLogin} from "@/api/weChat";

const open = ref(false);
const status = ref("active"); // expired 为正常，false 为过期
const {send, loading = true, data}: any = useRequest(() => weChatLogin(), {immediate: false});

const handleOpen = () => {
    open.value = true;
    send();
};

const handleCancel = () => {
    open.value = false;
};

const handleRefresh = () => {
    send();
};

defineExpose({
    show: handleOpen,
});
</script>
<style lang="less" scoped>
.modal {
    .wrapper {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 20px 0;
        width: 280px;
        background: linear-gradient(180deg, #519ff1, #2866de);
        border-radius: 4px;
        .title {
            font-size: 16px;
            font-weight: 400;
            color: #fff;
            line-height: 22px;
            margin: 20px 0 0;
        }
        .desc {
            font-size: 14px;
            font-weight: 400;
            color: hsla(0, 0%, 100%, 0.85);
            line-height: 22px;
            margin-bottom: 0;
            text-align: center;
        }
        .qcode {
            width: min-content;
            margin-top: 20px;
            display: flex;
            justify-content: center;

            :deep(.ant-qrcode) {
                border-color: #fff;
            }
        }
    }
}
</style>
